import { connect, history } from "umi";
import { useState } from "react";
import {
  Button,
  Table,
  Space,
  Popconfirm,
  Modal,
  Form,
  Input,
  Radio,
  Tag,
} from "antd";
const { TextArea } = Input;

const PageTable = (props: any) => {
  const {
    rows,
    loading,
    total,
    dispatch,
    dictInfo,
    pageNumber,
    pageSize,
    formParams: { pageNum },
  } = props;
  // const access = useAccess();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [form] = Form.useForm();

  const toggleModal = () => {
    setIsModalOpen(!isModalOpen);
  };

  const submitForm = () => {
    form
      .validateFields()
      .then((params: any) => {
        dispatch({
          type: "SystemDictionary/updateDictionaryType",
          params,
          callback: () => {
            dispatch({
              type: "SystemDictionary/queryTableDataList",
            });
          },
        });
      })
      .catch((err: string) => {
        console.log(err);
      });
  };

  // 查看字典详情
  const jumpDetail = (id: any, dictType: any) => {
    history.push(`/system/dict/detail/${dictType}`);
  };
  const changeTable = (e: any) => {
    dispatch({
      type: "SystemDictionary/queryTableDataList",
      params: {
        pageNum: e.current,
        pageSize: e.pageSize,
      },
    });
  };
  const columns = [
    // {
    //   title: '字典编号',
    //   dataIndex: 'dictId',
    //   key: 'dictId',
    // },
    {
      title: "序号",
      dataIndex: "order",
      key: "order",
      render: (text: any, record: any, index: number) => {
        return `${
          ((pageNumber ? pageNumber : 1) - 1) * (pageSize ? pageSize : 10) +
          (index + 1)
        }`;
      },
    },
    {
      title: "字典名称",
      dataIndex: "dictName",
      key: "dictName",
    },
    {
      title: "字典类型",
      dataIndex: "dictType",
      key: "dictType",
      render: (text: any, row) => (
        <a onClick={() => jumpDetail(row.id, row.dictType)}>{text}</a>
      ),
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (_: any) =>
        _ === "0" ? <Tag color="blue">正常</Tag> : <Tag color="red">停用</Tag>,
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
    },
    {
      title: "操作",
      fixed: "right",
      dataIndex: "dictId",
      key: "dictId",
      render: (id: any, row: any) => (
        <Space size="middle">
          <Button
            type="link"
            onClick={() => {
              setIsModalOpen(true);
              form.setFieldsValue(row);
            }}
          >
            修改
          </Button>

          <Popconfirm
            title={<>确定将该条数据字典删除吗？</>}
            onConfirm={() => {
              // eslint-disable-next-line @typescript-eslint/no-unused-expressions
              dispatch({
                type: "SystemDictionary/delDictionaryType",
                params: id,
                callback: () => {
                  dispatch({ type: "SystemDictionary/queryTableDataList" });
                },
              });
            }}
            okText="确认"
            cancelText="取消"
          >
            <Button type="link" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <>
      <Table
        columns={columns}
        dataSource={rows}
        rowKey={(record) => record.dictId}
        loading={loading}
        onChange={changeTable}
        pagination={{
          total,
          showSizeChanger: true,
          defaultCurrent: 1,
          current: pageNum,
        }}
      />
      <Modal
        title="修改字典类型"
        open={isModalOpen}
        onOk={toggleModal}
        onCancel={toggleModal}
        forceRender
        footer={false}
      >
        <Form
          labelCol={{ span: 4 }}
          form={form}
          initialValues={{
            ...dictInfo,
          }}
          onFinish={submitForm}
        >
          <Form.Item name="dictId" label="字典编号" hidden>
            <Input placeholder={"请输入字典编号"} maxLength={20}></Input>
          </Form.Item>
          <Form.Item name="dictName" label="字典名称">
            <Input placeholder={"请输入字典名称"} maxLength={20}></Input>
          </Form.Item>
          <Form.Item name="dictType" label="字典类型">
            <Input placeholder={"请输入字典类型"} maxLength={20} />
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Radio.Group>
              <Radio value="0">正常</Radio>
              <Radio value="1">停用</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="备注" name="remark">
            <TextArea rows={4} placeholder={"请输入内容"} maxLength={100} />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4 }}>
            <Button
              type="primary"
              htmlType="submit"
              onClick={() => setIsModalOpen(false)}
            >
              保存
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default connect(({ SystemDictionary, loading }: any) => ({
  ...SystemDictionary,
  loading: loading.effects["SystemDictionary/queryTableDataList"] || false,
}))(PageTable);
